<template>
	<view class="scroll-view-container">
		<!-- 左边 -->
		<view class="left-scroll-view">
			<!-- <view class="left-scroll-view-item" :class="{active:currentIndex === index}" v-for="(item,index) in categories" :key="item.cat_id" @click="toggle(index)"> -->
			<view :class="['left-scroll-view-item',currentIndex === index ? 'active':'']"
				v-for="(item,index) in categories" :key="item.cat_id" @click="currentIndex = index">
				{{item.cat_name}}
			</view>
		</view>
		<!-- 右边 -->
		<view class="right-scroll-view">
			<block v-if="level2List">
				<!-- 二级分类 -->
				<view v-for="item in level2List" :key="item.cat_id">
					<view class="cate-lv2-title">{{item.cat_name}}</view>
					<!-- 三级分类 -->
					<view class="cate-lv3-list">
						<view v-for="subitem in item.children" :key="subitem.cat_id" class="cate-lv3-item">
							<image :src="subitem.cat_icon" />
							<text class="name">{{subitem.cat_name}}</text>
						</view>
					</view>
				</view>
			</block>
			<van-empty v-else description="暂无二级分类" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { getCategories } from '../../api/category'
	import type { Category } from '../../types/category'

	import { useTotalCount, useTabBarItemText } from '../../hooks'
	useTotalCount()
	useTabBarItemText()

	// 定义模型数据
	const categories = ref([] as Category[])
	const currentIndex = ref(0)

	// 写上发请求的方法
	const getCategoriesData = async () => {
		const res = await getCategories()

		categories.value = res.data
	}

	getCategoriesData()

	// 切换一级分类
	// const toggle = (index : number) => {
	// 	currentIndex.value = index
	// }

	// const level2List = computed(() => categories.value[currentIndex.value] && categories.value[currentIndex.value].children)

	// ?. 可选链操作符，意思是?前面的不为null或是不为undefined，则继续.children
	const level2List = computed(() => categories.value[currentIndex.value]?.children)
</script>

<style lang="scss" scoped>
	.scroll-view-container {
		display: flex;
		height: 100%;

		.left-scroll-view {
			width: 120px;
			height: 100vh;
			overflow: auto;

			.left-scroll-view-item {
				line-height: 60px;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 12px;

				// 激活项的样式
				&.active {
					background-color: #ffffff;
					position: relative;
					color: #c00000;
				}
			}
		}

		// 去除滚动条
		.left-scroll-view::-webkit-scrollbar {
			width: 0 !important;
		}

		.right-scroll-view {
			height: 100vh;
			overflow: auto;
			flex: 1;

			.cate-lv2-title {
				font-size: 12px;
				font-weight: bold;
				padding: 15px 15px;
			}

			.cate-lv3-list {
				display: flex;
				flex-wrap: wrap;

				.cate-lv3-item {
					width: 33.33%;
					margin-bottom: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					.name {
						font-size: 12px;
						color: gray;
					}
				}
			}
		}

		// 去除滚动条
		.right-scroll-view::-webkit-scrollbar {
			width: 0 !important;
		}
	}
</style>